<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            display: inline-block;
            width: 123px;
            height: 173px;
            background: url(./img/colon.JPG);
        }
    </style>
</head>

<body>
    <img src="./img/0.JPG" class="img1">
    <img src="./img/0.JPG" class="img2">
    <span></span>
    <img src="./img/0.JPG" class="img3">
    <img src="./img/0.JPG" class="img4">
    <span></span>
    <img src="./img/0.JPG" class="img5">
    <img src="./img/0.JPG" class="img6">

    <script>



        // //获取图片
        // var img1 = document.querySelector(".img1");
        // var img2 = document.querySelector(".img2");
        // var img3 = document.querySelector(".img3");
        // var img4 = document.querySelector(".img4");
        // var img5 = document.querySelector(".img5");
        // var img6 = document.querySelector(".img6");

        // function showtime() {

        //     var nowtime = new Date();  //返回的是当前时间

        //     var hours = parseInt(nowtime.getHours() / 10);  //小时
        //     var hours1 = (nowtime.getHours()) % 10; //见10拆分


        //     var min = parseInt(nowtime.getMinutes() / 10);     //分钟
        //     var min1 = (nowtime.getMinutes()) % 10;  //见10拆分

        //     var s = parseInt(nowtime.getSeconds() / 10);      //秒数    
        //     var s1 = (nowtime.getSeconds()) % 10;   //见10拆分            
        //     //小时
        //     img1.src = `./img/${hours}.JPG`;
        //     img2.src = `./img/${hours1}.JPG`;

        //     //分钟
        //     img3.src = `./img/${min}.JPG`;
        //     img4.src = `./img/${min1}.JPG`;

        //     //秒数
        //     img5.src = `./img/${s}.JPG`;
        //     img6.src = `./img/${s1}.JPG`;
        // }

        showtime();

        // 一秒钟刷新一次
        setInterval(function () {
            showtime();
            // console.log(1111)
        }, 1000)
        function showtime (){
        let imgDom = document.querySelectorAll("img");
        var nowtime = new Date();  //返回的是当前时间

        var hours = parseInt(nowtime.getHours() / 10);  //小时
        var hours1 = (nowtime.getHours()) % 10; //见10拆分


        var min = parseInt(nowtime.getMinutes() / 10);     //分钟
        var min1 = (nowtime.getMinutes()) % 10;  //见10拆分

        var s = parseInt(nowtime.getSeconds() / 10);      //秒数    
        var s1 = (nowtime.getSeconds()) % 10;   //见10拆分 
        let timeArr = [hours,hours1,min,min1,s,s1] 
        
        imgDom.forEach(function(item,i){
            item.src = `./img/${timeArr[i]}.JPG`
            console.log(item,timeArr)
        })
    }
    </script>
</body>

</html>